<template>
	<view>
		<view class="box">
			<view class="content" v-for="(item,index) in typeList" :key="index">
				<view class="con-top">
					<view class="con-top-img">
						<image :src="item.img"></image>
					</view>
					<view class="con-top-title">
						<text>{{item.title}}</text>
					</view>
				</view>
				<view class="con-bottom">
					<view class="con-text" v-for="(n,i) in item.data" :key="i">
						<view :class="activeIndex == n.id ? 'active':'hide'" @click="changeActive(n)">
							<text>{{n.name}}</text>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//导入信息
	import {
		groupType
	} from '@/local_data/msg/group.js'

	export default {
		data() {
			return {
				typeList: [],
				activeIndex: 1
			}
		},
		methods: {
			changeActive(n) {
				this.activeIndex = n.id
				this.$emit('changeType', n)
			}
		},
		created() {
			this.typeList = groupType
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: rgba(19, 176, 82, 1);
	}

	.hide {
		background: rgba(229, 229, 229, 1);
	}

	.box {
		width: 94%;
		margin-left: 3%;

		.content {
			.con-top {
				display: flex;
				margin: 20rpx 0;

				.con-top-img {
					image {
						width: 45rpx;
						height: 45rpx;
					}
				}

				.con-top-title {
					text {
						color: rgba(0, 0, 0, 1);
						font-size: 32rpx;
						font-weight: 400;
					}
				}
			}

			.con-bottom {
				display: flex;
				flex-wrap: wrap;

				.con-text {
					width: 33.3%;
					margin-bottom: 20rpx;

					view {
						width: 80%;
						margin-left: 10%;
						height: 70rpx;
						line-height: 70rpx;
						// background: rgba(229, 229, 229, 1);
						border-radius: 60rpx;
						text-align: center;

						text {
							color: rgba(0, 0, 0, 1);
							font-size: 30rpx;
							font-weight: 400;
						}
					}

				}
			}
		}
	}
</style>
